import React, { useState, useEffect } from 'react';
import Calendar from "./calendar";

import {
    Form,
    Input,
    InputNumber,
    Button,
    Checkbox,
    Row,
    Col,
    Upload,
    Cascader,
    Select,
    Radio,
    DatePicker,
    Tabs,
    TimePicker,
    Table,
    Modal,
    message
} from 'antd';
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Column } = Table;
const { Search } = Input;
import axios from '@src/lib/axios';



function AddRoom({ visibleModal, changeVisible, hotel_id, room_id, getRoomList, filesList }) {
    const [form] = Form.useForm();
    const [ loading, setLoading ] = useState(false);
    const [ bedConf, setBedConf ] = useState([]);

    useEffect(() => {
        //获取床型配置
        getBedConf()
        if (visibleModal && room_id) {
            axios.post('/product/hotel/room/info', { room_id }).then(res => {
                if (res.code === 0) {
                    let data = res.data;
                    data.h_images_ids = data.h_images_ids.split(',');
                    form.setFieldsValue({
                        ...data
                    })
                }
            })
        }
    }, [ visibleModal ]);

    const getBedConf = ()=>{
        axios.post('/platform/hotel/conf/bed/list').then(res=>{
            if (res.code === 0) {
                let {data} = res
                let tmp = [];
                data.map(function (val) {
                    tmp.push({"value":val.id,"label":val.title});
                })
                setBedConf(tmp);
            }
        });
    }

    const handleOk = () => {
        form.validateFields().then(() => {
            setLoading(true);
            let params = form.getFieldsValue();
            if (room_id) {
                params = { ...params, room_id }
            }
            params.h_images_ids = params.h_images_ids.join(',')
            axios.post('/product/hotel/room/save', { ...params, hotel_id }).then(res => {
                setLoading(false);
                if (res.code === 0) {
                    message.success(room_id? '编辑成功！' : '保存成功！');
                    form.resetFields && form.resetFields();
                    getRoomList();
                    changeVisible(false);
                }
            }).catch(e => setLoading(false))
        }).catch(() => {
            console.log('校验失败！');
        });
    };
    const handleCancel = () =>{
        changeVisible(false);
        form.resetFields && form.resetFields();
    };
    let onFinish = (value) => {
        console.log(value)
    };
    let onChange = (value) => {
        console.log('changed', value);
    };

    const Footer = (
        <Row>
            <Col span={24}>
                <Button type="primary" onClick={handleOk} loading={loading}>保存</Button>
                <Button onClick={handleCancel}>取消</Button>
            </Col>
        </Row>
    );

    return (
        <Modal
            title={room_id? "编辑房型" : "添加房型"}
            visible={visibleModal}
            maskClosable={false}
            width={'70%'}
            footer={Footer}
            onCancel={handleCancel}
        >
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                initialValues={{
                    contain_breakfast: 3,
                    wifi: 1,
                    window: 1,
                    bathroom: 1,
                    deserve: 1,
                    floor:5,
                    extra_bed_price: 0,
                    h_images_ids: [],
                    allow_cancel_day:2,
                    limit_buy_num:5
                }}
                onFinish={onFinish}
            >
                <Row gutter={30}>
                    <Col span={8}>
                        <Form.Item
                            labelCol={20}
                            label="房型"
                            name="room_name"
                            validateTrigger="onBlur"
                            rules={[{ required: true, message: '房型名称必填项！' }]}
                        >
                           <Input/>
                        </Form.Item>

                    </Col>
                    <Col span={8} >
                        <Form.Item
                            labelCol={20}
                            label="床型"
                            name="conf_bed_id"
                            validateTrigger="onBlur"
                            rules={[{ required: true, message: '床型必选！' }]}
                        >
                            <Select style={{ width: '100%' }} options={bedConf}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            labelCol={20}
                            label="加床费"
                            name="extra_bed_price"
                            rules={[{ required: true, message: '加床费是必填项！' }]}
                        >
                            <InputNumber formatter={value=>`${value}${process.env.CURRENCY}`} style={{ width: '100%' }}/>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={8}>
                        <Form.Item
                            label="楼层"
                            name="floor"
                            rules={[{ required: true, message: '楼层是必填项！' }]}
                        >
                            <InputNumber style={{ width: '100%' }}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="面积"
                            name="area"
                            rules={[{ required: true, message: '面积是必填项！' }]}
                        >
                            <InputNumber formatter={value=>`${value}㎡`} style={{width:"100%"}} addonAfter="平方"/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="排序"
                            name="sort"
                        >
                            <InputNumber style={{width:"100%"}} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={12}>
                        <Form.Item
                            label="宽带"
                            name="wifi"
                        >
                            <Radio.Group>
                                <Radio value={2}>无</Radio>
                                <Radio value={1}>有（免费）</Radio>
                                <Radio value={3}>有（收费）</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="早餐"
                            name="contain_breakfast"
                        >
                            <Radio.Group defaultValue={3}>
                                <Radio value={2}>无</Radio>
                                <Radio value={1}>含早</Radio>
                                <Radio value={6}>含单早</Radio>
                                <Radio value={3}>含双早</Radio>
                                <Radio value={4}>含三早</Radio>
                                <Radio value={5}>有（收费）</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={12}>
                        <Form.Item
                            label="窗户"
                            name="window"
                        >
                            <Radio.Group>
                                <Radio value={1}>有窗</Radio>
                                <Radio value={2}>内窗</Radio>
                                <Radio value={3}>无窗</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="卫浴"
                            name="bathroom"
                        >
                            <Radio.Group>
                                <Radio value={1}>独立卫浴</Radio>
                                <Radio value={2}>公用卫浴</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={12}>
                        <Form.Item
                            label="能否退订"
                            name="if_cancel"
                        >
                            <Radio.Group defaultValue={1}>
                                <Radio value={1}>允许</Radio>
                                <Radio value={2}>不允许</Radio>
                            </Radio.Group>

                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            labelCol={{span:6}}
                            label="成团数（间）"
                            name="limit_buy_num"
                        >
                            <InputNumber />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={12}>
                        <Form.Item
                            labelCol={{span:10}}
                            label={"退订时间(入住日期前多少天）"}
                            name="allow_cancel_day"
                        >
                            <InputNumber/>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={12}>
                        <Form.Item
                            label="超值房型"
                            name="deserve"
                        >
                            <Radio.Group>
                                <Radio value={1}>是</Radio>
                                <Radio value={2}>否</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={30}>
                    <Col span={24}>
                        <Form.Item
                            label="房间图片"
                            name="h_images_ids"
                        >
                            <Checkbox.Group>
                                {
                                    filesList.map((item, i) => (
                                        <Checkbox key={i} value={item.h_images_id + ''}><img width={60} height={60} src={`${process.env.IMG_SERVER_URL}`+'/images_serv/' + item.imgid} alt=""/></Checkbox>
                                    ))
                                }
                            </Checkbox.Group>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}

export default React.memo(AddRoom);